<template>
  <div id="pic-chart"></div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
  markRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
let myChart = ref(null);
let props = defineProps(["lineColor"]);
const color3 = ["#fff", "#fff", "#fff"];
function getRich() {
  let result = {};
  color3.forEach((_, i) => {
    result[`a${i}`] = {
      color: "#fff",
      fontSize: 16,
    };
    result[`b${i}`] = {
      color: color3[i],
      fontSize: 16,
      fontWeight: 500,
      padding: [10, 10, 0, 0],
    };
  });
  return result;
}
let dataList = [
  {
    name: "日负荷率",
    value: "2229",
  },
  {
    name: "月负荷率",
    value: "2200",
  },
  {
    name: "年负荷率",
    value: "3720",
  },
];

const color = [
  ["#176FF9", "#176FF9"],
  ["#F73249", "#F73249"],
  ["#F8E000", "#F8E000"],
];

let data = [];
let legendDate = [];
let total = dataList.reduce((a, b) => {
  console.log(a, b);
  return a + b.value * 1;
}, 0);
// 循环添加数据
for (let i = 0; i < dataList.length; i++) {
  let tag = i % 5;
  data.push({
    name: dataList[i].name,
    value: dataList[i].value,
    itemStyle: {
      //borderRadius: "50%",
      //颜色渐变
      color: {
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: color[tag][0], // 0% 处的颜色
          },
          {
            offset: 1,
            color: color[tag][1], // 100% 处的颜色
          },
        ],
      },
    },
  });
  legendDate.push(dataList[i].name);
}
let initChart = () => {
  const option = {
    legend: {
      textStyle: {
        align: "top",
        color: "#fff",
        fontSize: 16,
      },
      itemGap: 45,
      itemWidth: 22,
      itemHeight: 12,

      bottom: "-1%",
      right: "14%",
    },
    backgroundColor: "#061021",
    tooltip: {
      trigger: "axis",
      axisPointer: {},
    },

    backgroundColor: "#061021",
    color: color3,
    tooltip: {
      trigger: "item",
    },

    series: [
      {
        type: "pie",
        radius: ["44%", "62%"],
        center: ["50%", "38%"],
        avoidLabelOverlap: false,
        // labelLine: {
        //   show: true,
        //   length2:100,
        //   length:220,
        //   lineStyle:{
        //     color:"red"
        //   }
        // },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
        },
        labelLine: {
          normal: {
            length: 30,
            length2: 110,
            lineStyle: {
              // color: '#e6e6e6'
            },
          },
        },
        label: {
          show: true,
          fontSize: 15,
          lineHeight: 22,
          // position: "outside",
          distanceToLabelLine: -70,
          align: "center",
          formatter: function (params) {
            const name = params.name;
            const percent = params.value + "个";
            const index = params.dataIndex || 0;
            return [`{a${index}|${name}}\n{b${index}|${percent}}`];
          },
          rich: getRich(),
        },
        data: data,
      },
    ],
  };
  myChart?.value?.setOption(option);
};
onMounted(() => {
  myChart.value = markRaw(echarts.init(document.getElementById("pic-chart")));
  initChart();
  window.addEventListener("resize", resize);
});
watch();
const resize = () => {
  myChart.value.resize();
};
onUnmounted(() => {
  removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
#pic-chart {
  width: 100%;
  height: 30vh;
  margin-top: 2vh;
}
</style>
